<template>
  <dialog-edit :visible.sync="dialogVisible" :editModel="'E'" :title="'分配用户'" :api="api" :autoSave="false"
      @onSaved="onSaved" :width="'70%'" :loading="loading">
      <div class="userChange">
        <el-tree :data="orgData" ref="menuTree" :props="defaultProps" @node-click="handleNodeClick">
        </el-tree>
        <!-- 用户分配穿梭框 -->
        <el-transfer v-model="selectUser" :data="transData" :props="transProps" v-loading="lodinguser"
          :titles="['可分配用户', '已分配用户']" filterable :right-default-checked="checkedUser"></el-transfer>
      </div>
  </dialog-edit>
</template>
<script>
  import DialogEdit from '@/components/dialog/DialogEdit'
  import { sysOrg, sysUser, sysMenu, sysRole } from '@/api/platformApi'
  export default {
    components: {
      DialogEdit
    },
    props: {
      visible: {
        type: [Boolean]
      },
      rowId: {
        type: String,
        default: ''
      }
    },
    data () {
      return {
        // 组织机构数据源
        orgData: [],
        defaultProps: {
        },
        // 用户数据
        transData: [],
        transProps: {
          key: 'id',
          label: 'name'
        },
        selectUser: [],
        lodinguser: false,
        checkedUser: [],
        loading: false
      }
    },
    computed: {
      api () {
        return sysMenu
      },
      dialogVisible: {
        get: function () {
          return this.visible
        },
        set: function (value) {
          this.$emit('update:visible', value)
        }
      }
    },
    created () {
      this.getOfficeTree()
      this.getAllUsers()
    },
    methods: {
      getData () {
        this.api.getList().then(res => {
          this.data = res.data
        })
      },
      // 获取所有组织机构
      getOfficeTree () {
        sysOrg.orgTreeAll().then(res => {
          this.orgData = res.data
        })
      },
      // 组织机构树选择后查询当前机构下的用户
      handleNodeClick (data) {
        let obj = {
          orgId: data.value,
          roleId: this.rowId
        }
        this.lodinguser = true
        sysUser.orgUser(obj).then(res => {
          this.transData = res.data
          this.lodinguser = false
        })
        sysUser.orgUser1(obj).then(res => {
          this.selectUser = res.data
          this.lodinguser = false
        })
      },
      // 保存用户授权
      onSaved () {
        let obj = {
          id: this.rowId,
          userIds: this.selectUser
        }
        this.loading = true
        sysRole.saveUser(obj).then(res => {
          if (res.msg === '执行成功') {
            this.success(res.msg)
            this.dialogVisible = false
            this.$emit('handSearch')
          } else {
            this.error(res.msg)
          }
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      },
      getAllUsers () {
        let obj = {
          orgId: '',
          roleId: this.rowId
        }
        this.lodinguser = true
        sysUser.orgUser(obj).then(res => {
          this.transData = res.data
          this.lodinguser = false
        })
        sysUser.orgUser1(obj).then(res => {
          this.selectUser = res.data
          this.lodinguser = false
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .userChange {
    display: flex;
    justify-content: space-around;
    & > div:first-child {
      width: 30%;
      max-height: 280px;
      overflow-y: auto;
    }
  }
</style>
